<template>
  <div class="com">
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname">媒介</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="listitem">
        <div class="itemname">频道</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" style="margin-left:20px;">分析</el-button>
      </div>
    </div>
    <div class="allinfo">
      <div class="left">
        今年合同收入
        <span class="ro1 ro2">{{income}}</span>万元，预计新增收入
        <span class="ro1 ro3">{{predict}}</span> 万元
      </div>
      <div class="right">
        合计总收入：
        <span class="ro1 ro4">{{allincome}}</span> 万元
      </div>
    </div>
    <div class="infocom">
      <chart name="one1" v-if="allstatus" :data="echars"></chart>
    </div>
    <div class="timecondition">
      <el-button type="text">当月</el-button>
      <el-button type="text">近2月</el-button>
      <el-button type="text">近3月</el-button>
      <el-button type="text">近半年</el-button>
      <el-button type="text">近1年</el-button>
      <el-button type="text">自定义</el-button>
    </div>
    <div class="tab2">
      <div class="tabitem">
        <chart name="one2" v-if="bingstatus" :data="bing1"></chart>
      </div>
      <div class="tabitem">
        <chart name="one3" v-if="bingstatus" :data="bing2"></chart>
      </div>
    </div>
  </div>
</template>
<script>
import chart from "./echarts";
import { getSales_forecast } from "../../../api/decision.js";
export default {
  components: {
    chart
  },
  data() {
    return {
      income: "",
      predict: "",
      allincome: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      value1: "",
      allstatus: false,
      echars: {
        title: {
          text: "合同及预计收入金额分布",
          subtext: "纯属虚构"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["合同额", "预计额"],
          top: "bottom"
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: [
          {
            type: "value"
          }
        ],
        series: []
      },
      bing1:{},
      ning2:{},
     bingstatus:false
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      getSales_forecast().then(res => {
        console.log(res);
        if (res.code == 200) {
          this.income = res.data.input.input;
          this.predict = res.data.input.add_input;
          this.allincome = res.data.input.all_input;

          var Xtitle = [];
          var Series = [];
          var arr = [];
          res.data.distributed.money.forEach(element => {
            Xtitle.push(element.name);
            arr.push(element.money);
          });
          Series.push({
            name: "合同额",
            type: "bar",
            data: arr,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          });
          var arr1 = [];
          res.data.distributed.add.forEach(element => {
            arr1.push(element.money);
          });
          Series.push({
            name: "预计额",
            type: "bar",
            data: arr1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
                // { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
                // { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          });
          this.echars.xAxis.data = Xtitle;
          this.echars.series = Series;
          this.allstatus = true;

          //饼状图分析
          var bing1 = {
            title: {
              text: "潜在销售行业分布",
              left: "center"
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: []
            },
            series: {
              name: "行业",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: [
             
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          };
          res.data.industry.forEach(element => {
            bing1.legend.data.push(element.name);
            bing1.series.data.push({ name: element.name, value: element.num });
          });
          var bing2 = {
            title: {
              text: "潜在销售媒介分布",
              left: "center"
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: []
            },
            series: {
              name: "行业",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: [
             
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          };
          res.data.meida.forEach(element => {
            bing2.legend.data.push(element.name);
            bing2.series.data.push({ name: element.name, value: element.num });
          });
          this.bing1=bing1
          this.bing2=bing2
          this.bingstatus=true
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.seachlist {
  width: 97%;

  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  .listitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 100px;
    }
  }
}
.infocom {
  width: 80%;
  height: 400px;
  margin: 0 auto;
  margin-top: 30px;
}
.allinfo {
  display: flex;
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  .ro1 {
    font-size: 26px;
  }
  .ro3 {
    color: #ff0000;
  }
  .ro4 {
    color: #0000ff;
  }
  .ro2 {
    color: #008000;
  }
  .right {
    margin-left: 30px;
  }
}
.tab2 {
  margin-top: 20px;
  width: 100%;
  height: 300px;
  display: flex;
  .tabitem {
    width: 50%;
    height: 100%;
  }
}
.timecondition{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  margin: 20px auto;
}
</style>